The Panel Web server control is used to contain other controls, say a set of radio buttons, check boxes, etc. This is a very useful control which allows us to show or hide a group of controls at once.
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
Properties
Property | Description |
BackImageUrl | Specifies a URL to an image file to display as a background for this control |
Direction | Specifies the content display direction of the Panel |
ScrollBars | Specifies the position and visibility of scroll bars in the Panel |
We can change the appearance of panel; we can set the image in the background of panel
Example
Personal information is specified in Panel1 and contact information is specified in panel2.
Here two link buttons are used to show information of panel1 and panel2.
<asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">Personal information</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" onclick="LinkButton2_Click">contact information</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server" Font-Bold="True" Font-Underline="False"
ForeColor="Red" Height="202px" BackColor="#99FFCC" Width="267px">
<span class="style1">Personal Information<br />
Name </span>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br class="style1" />
<span class="style1"> Id </span>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br class="style1" />
<span class="style1"> Country</span><asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<br class="style1" />
<span class="style1"></span>
<asp:Button ID="Button1" runat="server" Text="Save" />
<br />
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Height="202px" BackColor="#66FF99"
Width="268px">
<b> contact Information<br />
<br />
mob. no </b>
<asp:TextBox ID="TextBox4" runat="server" CssClass="style2"></asp:TextBox>
<b>
<br />
email id </b>
<asp:TextBox ID="TextBox5" runat="server" CssClass="style2"></asp:TextBox>
<b>
<br />
</b>
<asp:Button ID="Button2" runat="server" CssClass="style2" Text="save" />
<br />
</asp:Panel>
protected void Page_Load(object sender, EventArgs e)
{
Panel1.Visible = false;
Panel2.Visible = false;
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
Panel1.Visible = true;
Panel2.Visible = false;
}
protected void LinkButton2_Click(object sender, EventArgs e)
{
Panel1.Visible = false;
Panel2.Visible = true;
}
When you click personal information LinkButton then personal information panel will show.
When you click contact information link button then contact information panel will show.
Rahul Roi
19-Oct-2019Very Nice Post for best practices....